Mi pregunta es sobre chartJS. Tengo una línea de tipo gráfico con 2 conjuntos de datos, los datos son sobre miembros cada 3 minutos en 24 horas. La cuestión es que son muchos datos sobre 1500 filas de tabla sql. El problema que tengo es que debido a que hay muchos datos, el gráfico se ve horrible. Mi pregunta es, ¿hay alguna forma de optimizarlo para que se vea mejor?

El gráfico se basa en ChartJS
Este es el código de la configuración del gráfico:

 Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif'; Chart.defaults.global.defaultFontColor = '#292b2c'; // Area Chart Example var ctx = document.getElementById("myAreaChart"); var myLineChart = new Chart(ctx, { type: 'line', data: { labels: <?php echo json_encode($cnnlsTime) ?> , datasets: [ { label: "CNNls Members", lineTension: 0.1, backgroundColor: "rgba(255,165,0,0.2)", borderColor: "rgba(2,117,216,1)", pointRadius: 1, pointBackgroundColor: "rgba(2,117,216,1)", pointBorderColor: "rgba(255,255,255,0.8)", pointHoverRadius: 2, pointHoverBackgroundColor: "rgba(2,117,216,1)", pointHitRadius: 50, pointBorderWidth: 2, data: <?php echo json_encode($cnnlsMembers) ?> , }, { label: "CNNSF Members", lineTension: 0.1, backgroundColor: "rgba(255,165,0,0.2)", borderColor: "rgba(2,117,216,1)", pointRadius: 1, backgroundColor: "rgba(2,117,216,1)", pointBorderColor: "rgba(255,255,255,0.8)", pointHoverRadius: 2, pointHoverBackgroundColor: "rgba(2,117,216,1)", pointHitRadius: 50, pointBorderWidth: 2, data: <?php echo json_encode($cnnsfMembers) ?> , }, ], }, options: { scales: { xAxes: [{ time: { unit: 'time' }, gridLines: { display: false }, ticks: { maxTicksLimit: 400 } }], yAxes: [{ ticks: { min: 0, max: 30, maxTicksLimit: 5 }, gridLines: { color: "rgba(0, 0, 0, .125)", } }], }, legend: { display: false } } });

¿Alguna sugerencia?